<template>
	<view>
		<view class="btn-group">
			<button type="primary" class="btn btn-left" :class="param.id==1?'active':''" @click="idSearch(1)">送机<text class="icon cuIcon-triangledownfill"></text></button>
			<button type="primary" class="btn btn-center" :class="param.id==0?'active':''" @click="idSearch(0)">全部<text class="icon cuIcon-triangledownfill"></text></button>
			<button type="primary" class="btn btn-right" :class="param.id==2?'active':''" @click="idSearch(2)">接机<text class="icon cuIcon-triangledownfill"></text></button>
		</view>
		<view class="cu-bar search bg-gray">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" v-model="param.key" :adjust-position="false" type="text" placeholder="请输入订单号"
				 confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-blue shadow-blur round" @click="search"><text class="cuIcon-similar"></text>筛选</button>
			</view>
		</view>
		<view class="o-wall">
			<!-- <view class="o-item bg-gray">
				<view class="title flex justify-between">
					<view class="o-number">订单号：2342412312312</view>
					<view class="cu-tag bg-cyan">服务中</view>
				</view>
				<view class="cell flex justify-between">
					<view class="cl">
						<text class="text-grey">日　　期：</text>2019:08:10
					</view>
					<view class="cr">
						<text class="text-grey">航班：</text>A23234
					</view>
				</view>
				<view class="cell flex justify-between">
					<view class="cl">
						<text class="text-grey">到达时间：</text>2019:08:10
					</view>
					<view class="cr">
						<text class="text-grey">人数：</text>A23234
					</view>
				</view>
				<view class="cell flex justify-between">
					<view class="cl">
						<text class="text-grey">价　　格：</text><text class="text-price text-red text-xxl">88</text>
					</view>
					<view class="cr">
						<text class="text-grey"></text>
					</view>
				</view>
				<view class="cell flex justify-between">
					<view class="cl">
						<text class="text-grey">联&nbsp;系&nbsp;&nbsp;人：</text>张三
					</view>
					<view class="cr">
						<text class="text-grey">联系方式：</text>13888888888
					</view>
				</view>
				<view class="cell flex justify-between">
					<view class="cl">
						<text class="text-grey">联&nbsp;系&nbsp;&nbsp;人：</text>张三
					</view>
					<view class="cr">
						<text class="text-grey">联系方式：</text>13888888888
					</view>
				</view>
				<view class="cell flex justify-between">
					<view class="cl">
						<text class="text-grey">司机电话：</text>13888888888
					</view>
					<view class="cr">
						<text class="text-grey"></text>
					</view>
				</view>
				<view class="o-success">
					备注信息：
				</view>
				<view class="o-image grid col-4 grid-square">
					<view class="bg-img" style="background-image:url(http://img.feiyit.com/feiyit/website/cases/xiaoniuka1.jpg)"></view>
					<view class="bg-img" style="background-image:url(http://img.feiyit.com/feiyit/website/cases/xiaoniuka1.jpg)"></view>
				</view>
				<view class="cell footer flex justify-between">
					<view class="cl">
						<text class="text-grey">下单日期：</text>2019:08:10
					</view>
					<view class="cr">
						<button class="cu-btn round bg-orange">申请退款</button>
					</view>
				</view>
			</view> -->
			<view class="o-item bg-gray" v-for="(it,index) in list" :key="index">
				<view class="title flex justify-between">
					<view class="o-number">订单号：{{it.number}}</view>
					<view class="cu-tag radius" :class="true?getServerColor(it.serviceStatus):''">{{getServerName(it.serviceStatus)}}</view>
				</view>
				<view class="cell flex justify-between">
					<view class="cl">
						<text class="text-grey">日　　期：</text>{{getServerData(it.serviceData)}}
					</view>
					<view class="cr">
						<text class="text-grey">航班：</text>{{it.flightNumber}}
					</view>
				</view>
				<view class="cell flex justify-between">
					<view class="cr">
						<text class="text-grey">服务类别：{{it.types==1?'国内服务':'国际服务'}}</text>
					</view>
					<view class="cr">
						<text class="text-grey">{{getServerMold(it)}}</text>
					</view>
				</view>
				<view class="cell flex justify-between">
					<view class="cl">
						<text class="text-grey">{{getTypeName(it.mold)}}时间：</text>{{getServerTime(it)}}
					</view>
					<view class="cr">
						<text class="text-grey">人数：</text>{{it.peopleNumber}}
					</view>
				</view>
				
				<view class="cell flex justify-between">
					<view class="cl">
						<text class="text-grey">价　　格：</text><text class="text-price text-red text-xxl">{{it.price}}</text>
					</view>
					<view class="cr">
						<text class="text-grey"></text>
					</view>
					
				</view>
				<view class="cell flex justify-between" v-for="(item,cindex) in it.contactUs" :key="cindex">
					<view class="cl">
						<text class="text-grey">联&nbsp;系&nbsp;&nbsp;人：</text>{{item.name}}
					</view>
					<view class="cr">
						<text class="text-grey">联系方式：</text>{{item.phone}}
					</view>
				</view>
				<view class="cell flex justify-between">
					<view class="cl">
						<text class="text-grey">司机电话：</text>{{!it.driverPhone?'--':it.driverPhone}}
					</view>
					<view class="cr">
						<text class="text-grey"></text>
					</view>
				</view>
				<view class="o-success">
					备注信息：{{!it.summary?'--':it.summary}}
				</view>
				<view class="o-image grid col-4 grid-square" v-if="it.imageList.length>0">
					<view class="bg-img" v-for="(item,mindex) in it.imageList" :key="mindex" @tap="previewImage(item.url,it)" :style="[{ backgroundImage:'url(' + baseUrl+item.url + ')' }]"></view>
				</view>
				<view class="cell footer flex justify-between">
					<view class="cl">
						<text class="text-grey">下单日期：</text>{{it.addTime}}
					</view>
					<view class="cr">
						<button class="cu-btn round bg-orange" v-if="isBackMonery(it) && it.serviceStatus==1 && it.backStatus==0" @click="applyBack(it)">申请退款</button>
						<button class="cu-btn round bg-orange" v-if="it.backStatus==1">已申请退款</button>
					</view>
				</view>
			</view>
		</view>
		<view class="nodata text-gray" v-if="list.length==0">没有查询到数据...</view>
		<view class="cu-modal" :class="isOpenWhere?'show':''"></view>
		<view class="cu-modal where-wall bg-white" :class="isOpenWhere?'show':''">
			<view class="prl">
			<view class="tip">订单状态</view>
			<view class="grid col-4">
				<view><button class="cu-btn radius" :class="param.status==1?'bg-blue':''" @click="ostatus(1)">已提交</button></view>
				<view><button class="cu-btn radius" :class="param.status==2?'bg-blue':''" @click="ostatus(2)">服务中</button></view>
				<view><button class="cu-btn radius" :class="param.status==3?'bg-blue':''" @click="ostatus(3)">已完成</button></view>
				<view><button class="cu-btn radius" :class="param.status==4?'bg-blue':''" @click="ostatus(4)">已退款</button></view>
			</view>
			<view class="fx"></view>
			<view class="tip">全部类型</view>
			<view class="grid col-2">
				<view><button class="cu-btn radius" :class="param.types==1?'bg-blue':''" @click="otypes(1)">国内航班</button></view>
				<view><button class="cu-btn radius" :class="param.types==2?'bg-blue':''" @click="otypes(2)">国际航班</button></view>
			</view>
			<view class="grid col-3" style="margin-top: 30rpx;">
				<view><button class="cu-btn round" :class="param.attr==1?'bg-blue':''" @click="oattr(1)">普通接机</button></view>
				<view><button class="cu-btn round" :class="param.attr==2?'bg-blue':''" @click="oattr(2)">普通送机</button></view>
				<view><button class="cu-btn round" :class="param.attr==7?'bg-blue':''" @click="oattr(7)">快速通道</button></view>
			</view>
			<view class="grid col-3" style="margin-top: 16rpx;">
				<view><button class="cu-btn round" :class="param.attr==3?'bg-blue':''" @click="oattr(3)">VIP接机</button></view>
				<view><button class="cu-btn round" :class="param.attr==4?'bg-blue':''" @click="oattr(4)">VIP送机</button></view>
				<view><button class="cu-btn round" :class="param.attr==8?'bg-blue':''" @click="oattr(8)">贵宾休息室</button></view>
			</view>
			<view class="grid col-3" style="margin-top: 16rpx;">
				<view><button class="cu-btn round" :class="param.attr==5?'bg-blue':''" @click="oattr(5)">登机口接机</button></view>
				<view><button class="cu-btn round" :class="param.attr==6?'bg-blue':''" @click="oattr(6)">登机口送机</button></view>
			</view>
			</view>
			<view class="grid col-3 footer-btn" style="margin-top: 40rpx;">
				<view><button class="cu-btn" @click="closeWhere">取消</button></view>
				<view><button class="cu-btn bg-grey" @click="clearWhere">清除</button></view>
				<view><button class="cu-btn bg-yellow text-white" @click="okWhere">确定</button></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isOpenWhere: false,
				param: {
					status:-1,
					types:0,
					attr:0,
					id:0,
					key: '',
					page: 1,
					guid: '',
					totalPages: 1
				},
				showLoadMore: false,
				loadMoreText: "加载中...",
				baseUrl: '',
				list: [],
				isxl: false
			};
		},
		computed: {
			...mapState(['hasLogin', 'user'])
		},
		onLoad(option) {
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/account/login'
				});
			}
			this.param.status=option.id;
			this.baseUrl = this.$url;
			this.param.guid=this.user.guid;
			uni.showLoading({
				title: 'loading'
			});
			this.initOrder();
		},
		onReachBottom() {
			if (this.param.page < this.param.totalPages && this.param.totalPages != 1) {
				this.param.page += 1;
				this.showLoadMore = true;
				this.initOrder();
			} else {
				this.showLoadMore = true;
				this.loadMoreText = "没有更多数据了!"
			}
		},
		onPullDownRefresh() {
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/account/login'
				})
			} else {
				this.isxl = true;
				this.initOrder();
			}
		},
		methods: {
			okWhere(){
				this.param.page = 1;
				this.isOpenWhere = false;
				uni.showLoading({
					title: 'loading'
				});
				this.initOrder();
			},
			otypes(v){
				this.param.types=v;
			},
			oattr(v){
				this.param.attr=v;
			},
			ostatus(v){
				this.param.status=v;
			},
			clearWhere(){
				this.param.types=0;
				this.param.attr=0;
				this.param.status=-1;
				this.param.key='';
			},
			idSearch(v){
				this.param.id=v;
				this.param.page = 1;
				uni.showLoading({
					title: 'loading'
				});
				this.initOrder();
			},
			closeWhere(){
				this.isOpenWhere = false;
			},
			search() {
				this.isOpenWhere=true;
			},
			applyBack(m) {
				var that = this;
				uni.showModal({
					content: '确定要申请退款吗？',
					success: (e) => {
						if (e.confirm) {
							uni.showLoading({
								title: 'loading'
							});
							that.$api.ajax('index/applyback', m, function(res) {
								var result = res[1].data;
								uni.hideLoading();
								if (result.statusCode == 200) {
									that.$api.msg('申请成功，请等待审核~');
									that.initOrder();
								} else {
									that.$api.msg(result.message);
								}
							});
						}
					}
				});
			},
			initOrder() {
				let that = this;
				this.$api.ajax('index/orderlist', that.param, function(res) {
					if (that.isxl) {
						that.isxl = false;
						uni.stopPullDownRefresh();
					} else {
						uni.hideLoading();
					}
					var result = res[1].data;
					if (result.statusCode == 200) {
						if (that.param.page == 1) {
							that.list = result.data.items;
						} else {
							let dblist = [];
							for (let i = 0; i < result.data.items.length; i++) {
								dblist.push(result.data.items[i]);
							}
							that.list = that.list.concat(dblist);
						}
						that.list = result.data.items;
						that.param.totalPages = result.data.totalPages;
					} else {
						that.$api.msg(result.message);
					}
				});
			},
			isBackMonery(m) {
				var tempDate = m.landTime;
				if(m.mold==2 || m.mold==4 || m.mold==6 || m.mold==7 || m.mold==8){
					tempDate = m.takeOffTime;
				}
				if(new Date(tempDate).getTime()>new Date().getTime() && parseFloat(this.getHour(tempDate,this.getFormatData('yyyy-MM-dd hh:mm:ss',new Date())))>2.5){
					return true;
				}else{
					return false;
				}
			},
			getHour(s1,s2){
				s1 = new Date(s1.replace(/-/g, '/'));
				s2 = new Date(s2.replace(/-/g, '/'));
				var ms = Math.abs(s1.getTime() - s2.getTime());
				return ms / 1000 / 60 / 60;
			},
			getTypeName(t) {
				var str = '';
				switch (t) {
					case 1:
						str = '到达';
						break;
					case 2:
						str = '起飞';
						break;
					case 3:
						str = '到达';
						break;
					case 4:
						str = '起飞';
						break;
					case 5:
						str = '到达';
						break;
					case 6:
						str = '起飞';
						break;
					case 7:
						str = '起飞';
						break;
					case 8:
						str = '起飞';
						break;
				}
				return str;
			},
			getServerData(t) {
				var dd = new Date(t.replace(/-/g, '/'));
				return dd.getFullYear() + '-' + (dd.getMonth() + 1) + '-' + dd.getDate();
			},
			getServerTime(t) {
				var d = null;
				switch (t.mold) {
					case 1:
						d = t.landTime;
						break;
					case 2:
						d = t.takeOffTime;
						break;
					case 3:
						d = t.landTime;
						break;
					case 4:
						d = t.takeOffTime;
						break;
					case 5:
						d = t.landTime;
						break;
					case 6:
						d = t.takeOffTime;
						break;
					case 7:
						d = t.takeOffTime;
						break;
					case 8:
						d = t.takeOffTime;
						break;
				}
				var dd = new Date(d.replace(/-/g, '/'));
				return (dd.getHours() > 9 ? dd.getHours() : '0' + dd.getHours()) + ':' + (dd.getMinutes() > 9 ? dd.getMinutes() :
					'0' + dd.getMinutes());
			},
			getServerColor(t){
				var str = '';
				switch (t) {
					case 1:
						str = 'bg-orange';
						break;
					case 2:
						str = 'bg-green';
						break;
					case 3:
						str = 'bg-blue';
						break;
					case 4:
						str = 'bg-red';
						break;
				}
				return str;
			},
			getServerName(t) {
				var str = '';
				switch (t) {
					case 1:
						str = '已提交';
						break;
					case 2:
						str = '服务中';
						break;
					case 3:
						str = '已完成';
						break;
					case 4:
						str = '已退款';
						break;
				}
				return str;
			},
			getServerMold(data){
				var str = '';
			                        switch (data.mold) {
			                            case 1: str = '普通接机服务'; break;
			                            case 2: str = '普通送机服务'; break;
			                            case 3: str = 'VIP接机服务'; break;
			                            case 4: str = 'VIP送机服务'; break;
			                            case 5: str = '登机口接机服务'; break;
			                            case 6: str = '登机口送机服务'; break;
			                            case 7: str = data.types == 1 ? '安检快速通道' : '联检快速通道'; break;
			                            case 8: str = '贵宾休息室'; break;
			                        }
										return str;
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			goOpenWhere() {
				this.isOpenWhere = true;
			},
			getFormatData(fmt, dates) {
				var date = new Date(dates);
				var o = {
					"M+": date.getMonth() + 1, //月份 
					"d+": date.getDate(), //日 
					"h+": date.getHours(), //小时 
					"m+": date.getMinutes(), //分 
					"s+": date.getSeconds(), //秒 
					"q+": Math.floor((date.getMonth() + 3) / 3), //季度 
					"S": date.getMilliseconds() //毫秒 
				};
				if (/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
				for (var k in o)
					if (new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			},
			previewImage: function(img, m) {
				var imgStrArr = [];
				var _this = this;
				for (var i = 0; i < m.imageList.length; i++) {
					imgStrArr.push(_this.$url + m.imageList[i].url);
				}
				uni.previewImage({
					current: _this.$url + img,
					urls: imgStrArr
				})
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		background: #ffffff;
	}

	.cu-modal {
		top: 260rpx;
	}
	.where-wall{
		position: fixed;
		left: 0px;
		right: 0px;
		top: 260rpx;
		min-height: 200rpx;
		z-index: 1111;
		bottom: inherit;
		.prl{
			padding:0 26rpx;
		}
		.tip{
			text-align: left;
			margin-bottom: 20rpx;
			padding-left: 10rpx;
		}
		.fx{
			height: 2px;
			margin:20rpx 0;
			border-bottom: 1rpx solid #e6e7e8;
		}
		.cu-btn{
			font-size:12px;
			width:95%;
		}
		.footer-btn{
			.cu-btn{
				width:100%;
				font-size: 14px;
				border-radius: 0px;
				padding:40rpx 0;
			}
		}
	}
	.nodata{
		text-align: center;
		padding:100rpx 0;
	}
	.o-wall {
		padding: 24rpx;

		.o-item {
			padding: 20rpx 30rpx;
			margin-bottom: 30rpx;

			.o-number {
				padding-top: 10rpx;
			}

			.title {
				padding: 4rpx 0 20rpx 0;
				border-bottom: 1px solid #e6e7e8;
			}

			.cell {
				padding: 10rpx 0rpx;
			}

			.o-success {
				margin-top: 10rpx;
				padding: 20rpx 0;
				border-top: 1px solid #e6e7e8;
				border-bottom: 1px solid #e6e7e8;
			}

			.o-image {
				padding: 20rpx 0;
				border-bottom: 1px solid #e6e7e8;
			}

			.footer {
				margin-top: 10rpx;
			}
		}
	}

	.cu-bar {
		padding: 30rpx 0rpx;

		.search-form {
			background-color: #FFFFFF !important;
		}

		.cuIcon-similar {
			margin-right: 10rpx;
		}
	}

	.btn-group {
		padding: 20rpx 40rpx 40rpx 40rpx;
		text-align: center;
		position: relative;

		.btn {
			background-color: #0081ff;
			color: #ffffff;
			width: 26%;
			display: inline-block;
			font-size: 30rpx;
			position: relative;
			overflow: inherit;

			.icon {
				position: absolute;
				left: 50%;
				margin-left: -28rpx;
				top: 6rpx;
				color: #ffffff;
				font-size: 60rpx;
			}
		}

		.btn.active {
			.icon {
				color: #0081ff;
			}
		}

		.btn-left {
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
			margin-right: 1px;
		}

		.btn-center {
			border-radius: 0px;
		}

		.btn-right {
			margin-left: 1px;
			;
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
		}

	}
</style>
